<template>
  <div>
    <div ref="pie" class="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "Pie_Echart",
  props:['pie_data','title'],
  data(){
    return{
      chart:null,
    }
  },
  mounted() {
    this.chart=echarts.init(this.$refs.pie);
    const options={
      legend: {
        top: 'bottom'
      },
      title:{
        text:'总金额:￥'+0,
      },
      tooltip: {
          trigger: 'item',
          formatter: '{b} : ￥{c} ({d}%)'
        },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '南丁格尔玫瑰图',
          type: 'pie',
          radius: [50, 150],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8,
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' }
          ]
        }
      ]
    };
    this.chart.setOption(options);
  },
  computed:{
    sum(){
      let val=0;
      this.pie_data.forEach((item)=>{
        val=val+item.value;
      })
      //解决浮点数精度问题，保留两位小数
      return Math.floor(val * 100) / 100;
    }
  },
  watch:{
    pie_data(){
      this.chart.setOption({
        title:{
          text:'总金额:￥'+this.sum,
        },
        series:[{
          data:this.pie_data,
          name:this.title
        }]
      })
    }
  }
}
</script>

<style scoped>
.main{
  width: 100%;
  height: 400px;
}
</style>